@charset "utf-8";

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }

body { background: #808080; color: #000; font: normal 12px/1.2 Arial, Helvetica, sans-serif; }

#wrapper { position: relative; height: 67%; }

#player { width: 100%; height: 100%; padding: 0 60px; background: #000; }
#player + .subtitles { position: absolute; top: auto; left: 0; bottom: 40px; width: 100%; padding: 0 60px; text-align: center; color: #FFF; font: normal 18px/1.2 Arial, Helvetica, sans-serif; text-shadow: -2px 0 #000, -2px 2px #000, 0 2px #000, 2px 2px #000, 0px 2px #000, 2px -2px #000, 0 -2px #000, -2px -2px #000; transition: top 500ms 650ms; }

.button { display: block; position: absolute; width: 50px; height: 50px; border: none; background: url(images/controls-sprite.png); font-size: 0; line-height: 0; color: transparent; text-indent: -5000em; cursor: pointer; }

#load-video,
#load-video-link { top: 5px; left: 5px; background-position: 0 0; }
#load-subtitles,
#load-subtitles-link { top: 65px; left: 5px; background-position: 0 -50px; }
#load-video-from-youtube { top: 125px; left: 5px; background-position: 0 -100px; }
#set-start { bottom: 5px; left: 5px; background-position: 0 -150px; }
#set-stop { bottom: 65px; left: 5px; background-position: 0 -200px; }
#save { top: 5px; right: 5px; background-position: -50px 0; }
#save-to-youtube { top: 65px; right: 5px; background-position: -50px -50px; }
#change-font { top: 125px; right: 5px; background-position: -50px -100px; }
#help { top: 185px; right: 5px; background-position: -50px -150px; }
#set-stop-start { bottom: 5px; right: 5px; background-position: -50px -200px; }

input[type="file"].button { opacity: 0; }

#grid { height: 33%; overflow-x: hidden; position: relative; }
#grid table { width: 100%; border-collapse: collapse; table-layout: fixed; background: #FFF; text-align: left; }
#grid tbody { overflow-y: scroll; }
#grid .time { width: 200px; }
#grid tr.currentLine { background: #FFFFB0; }
#grid th,
#grid td { height: 16px; border: 1px solid #CCC; padding: 3px 6px; }

#player-drop-target,
#sub-drop-target { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); }

#player-drop-target p,
#sub-drop-target p { display: inline-block; position: absolute; top: 50%; left: 50%; width: 300px; height: 85px; margin: -42px 0 0 -150px; background: #FFF; border-radius: 7px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); font: bold 24px/85px Arial, Helvetica, sans-serif; text-align: center; }

body.dropTarget #player-drop-target,
body.dropTarget #sub-drop-target { display: block; }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
	.button { background-image: url(images/controls-sprite@2x.png); -webkit-background-size: 100px 250px; -moz-background-size: 100px 250px; background-size: 100px 250px; }
}